<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../../style.css" media="screen" />
<link rel="stylesheet" href="../../css/home.css" media="screen" />
<title>Home</title>
<script type="text/javascript" src="../../scripts/jquery.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery.ui.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../../scripts/cufon/cufon-yui.js"></script>
<script type="text/javascript" src="../../scripts/cufon/PSL_Kittithada_Pro___700.font.js"></script>
<script type="text/javascript" src="../../scripts/common.js"></script>
<script type="text/javascript">
Cufon.replace('.menu-sub-nav-t');
Cufon.replace('.menu-sub-nav');
$(function(){
	$('.left').hover(function(){
		$(this).find('.left-nav').stop().animate({'top':'-170px'}, {duration: 400,easing: 'easeInOutBack'});
	},function(){
		$(this).find('.left-nav').stop().animate({'top':'0px'}, {duration: 300});
	})

	$('.right li').hover(function(){
		$(this).find('.menu-sub-nav').stop().animate({'top':'-74px'}, {duration: 300,easing: 'easeInOutBack'});
		$(this).find('.menu-sub-nav-t').stop().animate({'top':'-100px'}, {duration: 300,easing: 'easeInOutBack'});
	},function(){
		$(this).find('.menu-sub-nav').stop().animate({'top':'0px'}, {duration: 300});
		$(this).find('.menu-sub-nav-t').stop().animate({'top':'-170px'}, {duration: 300});
	});
	
	$('.vdo').bind('click',function(){
		$(this).next().hide();
		$(this).next().next().hide();
		var img = $(this).find('img');
		var w = img.attr('width');
		
		
		if(img.attr('class') == 'active'){
			var vdodiscss = {
				'position': 'static',
				'z-index':'1'
			};
			var src = '/vdo/'+img.attr('alt')+'/0.jpg';
			 
			img.removeClass('active').attr('src',src);
			$(this).parent().css({'overflow':'hidden'});
			$(this).animate({'width':'100%'},500).css(vdodiscss);
			$(this).next().show();
			$(this).next().next().show();
			return false;
		}

		var vdocss = {
			'position': 'absolute',
			'z-index':'100'
		};
		$(this).parent().css({'overflow':'inherit','width':w});
		$(this).css(vdocss).animate({'width':'140%'},500);
		img.addClass('active');
		img.play();
		return false;
	});
});

$.fn.play = function(){
	var obj = $(this);
	var i	= 1;
	var p = obj.attr('alt');
	var ii = setInterval(function ()
	{
		i= i+1;
		if(i>=30){
			i =1;
		}
		obj.attr({'src':'/vdo/'+p+'/'+i+'.png'});
	}, 100);
	$('.vdo').bind('click',function(){
		clearInterval(ii);
		return false;	
	});
}
</script>
<style type="text/css">
html, body {
	overflow: hidden;
}
.vdo {
	cursor:pointer;
	background:#000;
}
.vdo img {
	width:100%;
}
.right li .r{
	right:0;	
}
.right li .b{
	bottom:0;	
}
.right li .rb{
	right:0;
	bottom:0;	
}
</style>
</head>
<body id="home">
<!--$header_html-->
<div class="shadow-l"></div>
<div class="shadow-r"></div>
<div id="wrap-container">
  <div class="content">
    <div class="left"> <img src="../../images/img-home/img-home-1.jpg" />
      <div class="left-nav">
        <p class="shoe-cafe">Shoe Cafe</p>
        <p class="find-us">Find Us</p>
        <a href="#" class="fb">Facebook</a> <a href="#" class="tw">Twitter</a> </div>
    </div>
    <div class="right">
      <ul>
        <li class="row1">
          <div  > <img src="../../images/img-home/img-home-2.jpg" width="314" /> </div>
          <div class="menu-sub-nav">
            <p><a href="/location-shop/">Location Shop</a></p>
          </div>
        </li>
        <li class="row1">
          <div class="vdo"> <img src="../../images/img-home/img-home-3.jpg" width="352" alt="002" /></div>
          <div class="menu-sub-nav">
            <p><a href="/shopping/">Shopping</a></p>
          </div>
        </li>
        <li class="row1">
          <div class="vdo r"> <img src="../../images/img-home/img-home-4.jpg" width="291" alt="003"  /></div>
          <div class="menu-sub-nav">
            <p><a href="/contact-us/">Countact us</a></p>
          </div>
        </li>
        <li class="row2">
          <div class="vdo b"> <img src="../../images/img-home/img-home-5.jpg" width="386" alt="004"  /></div>
          <div class="menu-sub-nav">
            <p><a href="/activity/">Activity</a></p>
          </div>
        </li>
        <li class="row2">
          <div class="vdo b"> <img src="../../images/img-home/img-home-6.jpg" width="243" alt="005"  /></div>
          <div class="menu-sub-nav">
            <p><a href="/category/">Category</a></p>
          </div>
        </li>
        <li class="row2">
          <div class="vdo rb"> <img src="../../images/img-home/img-home-7.jpg" width="328"  alt="001"   /></div>
          <div class="menu-sub-nav">
            <p><a href="/news/">News</a></p>
          </div>
          <div class="menu-sub-nav-t">
            <p><a href="/news/">Webboard</a></p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
<!--$footer_html-->
</body>
</html>
